<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hero - Admin</title>
  <link rel="stylesheet" href="/styles/bootstrap.css">
  <style>
    .hero-list img {
      width: 50px;
      height: 50px;
      display: block
    }

    .hero-list td {
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <header>
    <div class="page-header container">
      <h1>王者荣耀 <small>英雄管理器</small></h1>
    </div>
  </header>
  <div class="container hero-list">
    <a class="btn btn-success pull-right" href="./add.html">添加英雄</a>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>性别</th>
          <th>头像</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody">
      </tbody>
    </table>
  </div>
  <!-- 添加列表结构的模板 -->
  <script type='text/template' id='userlistTemp'>
    {{each data}}
      <tr>
        <td>{{$index + 1}}</td>
        <td>{{$value.name}}</td>
        <td>{{$value.gender}}</td>
        <td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
        <td><a href="#">查看</a> <a href="./edit.html?id={{$value.id}}">修改</a>
          <a href="javascript:;" class='userdel' data-id='{{$value.id}}'>删除</a></td>
      </tr>
    {{/each}}
  </script>
  <!-- 引入资源文件 -->
  <script src="/libs/jquery.js"></script>
  <script src="/libs/template-web.js"></script>
  <script src="/js/index.js"></script>
</body>

</html>